<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <form class="form-inline" role="form" @submit.prevent="searchPlatAdmins(1)">
              <div class="form-group" v-show="!isLogin">
                <label class="control-label">{{platName()}}名称：</label>
                <div class="btn-group">
                  <input type="text" :name="platType +'.name'" @change="setSearch" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group" v-show="!isLogin">
                <label class="control-label">{{platName()}}号：</label>
                <div class="btn-group">
                  <input type="text" :name="platType +'.' + platType + 'No'" @change="setSearch" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">用户名：</label>
                <div class="btn-group">
                  <input type="text" name="admin.name" @change="setSearch" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">手机号：</label>
                <div class="btn-group">
                  <input type="text" name="admin.mobile" @change="setSearch" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">查 找</button>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <div class="btn-group">
                  <button type="button" class="btn btn-primary" v-on:click="newPlatAdmin()">新 增</button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-12 table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th v-if="!isLogin">{{platName()}}</th>
                  <th v-if="!isLogin">{{platName()}}号</th>
                  <th>用户名</th>
                  <th>手机号</th>
                  <th>登录时间</th>
                  <th>注册时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(platAdmin, index) in platAdmins" :key="platAdmin.id.adminId">
                  <td v-if="!isLogin">{{platNameText(platAdmin)}}</td>
                  <td v-if="!isLogin">{{platNoText(platAdmin)}}</td>
                  <td>{{platAdmin.admin.name}}</td>
                  <td>{{platAdmin.admin.mobile}}</td>
                  <td>{{dateTimeText(platAdmin.admin.curTime)}}</td>
                  <td>{{dateTimeText(platAdmin.admin.addTime)}}</td>
                  <td>
                    <a :href="'#/plat-admin-role-' + platType +'-' + platIdText(platAdmin) + '-' + platAdmin.id.adminId" class="badge badge-info"
                      title="角色分配">
                      <span class="far fa-user"> 角色</span>
                    </a>
                    &nbsp;
                    <a href="javascript:void(0);" class="badge badge-info" title="编辑" v-on:click="editPlatAdmin(index)">
                      <span class="far fa-edit"> 编辑</span>
                    </a>
                    &nbsp;
                    <a href="javascript:void(0);" class="badge badge-info" title="删除" v-on:click="delPlatAdmin(index)">
                      <span class="far fa-trash-alt"> 删除</span>
                    </a>
                    &nbsp;
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="col-12">
              <PageLink v-bind="paging" v-on:go-page="searchPlatAdmins($event)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
  <AdminModal ref="adminModal" :platType="platType" v-on:admin="setAdmin($event)" />
  <PlatModal ref="platModal" :platType="platType" v-on:plat="setPlat($event)" />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'

  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'
  import PageLink from './ComPageLink'

  import PlatModal from './PlatFindModal'
  import AdminModal from './AdminEditModal'

  import { platforms } from '../dist/js/enum'

  // 查询条件
  const search = {}

  // 列表数据
  const platAdmins = []

  // 分页信息
  const paging = {}

  // 添加/编辑对象
  const platAdmin = {}

  var loginPlat = null

  function loadLoginPlat() {
    this.isLogin = true
    $.get(cfg.serverPath + '/login/' + this.platType, result => {
      if (result.status != 0) {
        $(document).failMsg(result.message)
        return
      }
      if (result.data) {
        loginPlat = result.data
        this.isLogin = true
      } else {
        this.isLogin = false
      }
      this.searchPlatAdmins()
    })
  }
  function searchPlatAdmins(nowPage) {
    if (nowPage) {
      this.search.nowPage = nowPage
    }
    if (this.isLogin) {
      this.search[this.platType + '.' + this.platType + 'Id'] = loginPlat[this.platType + 'Id']
    }
    $.get(cfg.serverPath +
    '/' + this.platType + 'Admin/page' +
    '/' + (this.isLogin ? 'admin' : (this.platType + 'AndAdmin')),
      this.search,
      result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        Object.assign(this.paging, this.paging, result.data.paging)
        this.platAdmins.splice(0, this.platAdmins.length)
        if (!result.data.list) {
          return
        }
        for (let platAdmin of result.data.list) {
          this.platAdmins.push(platAdmin) }
      })
  }
  function newPlatAdmin() {
    if (!this.isLogin) {
      this.$refs.platModal.open()
    } else {
      this.$refs.adminModal.setAdmin({
        platforms: this.platformsValue()
      })
      this.$refs.adminModal.open()
    }
  }
  function editPlatAdmin(index) {
    this.platAdmin = this.platAdmins[index]
    this.$refs.adminModal.setAdmin(this.platAdmin.admin)
    this.$refs.adminModal.open()
  }
  function savePlatAdmin() {
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/' + this.platType + 'Admin/add',
      type: 'put',
      data: JSON.stringify(this.platAdmin),
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        let isExists = false
        for (let i in this.platAdmins) {
          let exists = this.platAdmins[i]
          if ((exists.id)[this.platType + 'Id'] == (this.platAdmin.id)[this.platType + 'Id']
            && exists.id.adminId == this.platAdmin.id.adminId) {
            this.platAdmins.splice(i, 1, this.platAdmin)
            isExists = true
            break;
          }
        }

        if (isExists) {
          $(document).infoMsg('更新成功')
          return
        }

        $(document).infoMsg('添加成功')
        this.platAdmins.unshift(this.platAdmin)
      }
    })
  }
  function delPlatAdmin(index) {
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/' + this.platType + 'Admin/del',
      type: 'delete',
      data: JSON.stringify(this.platAdmins[index].id),
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        $(document).infoMsg('删除成功')
        this.platAdmins.splice(index, 1)
      }
    })
  }
  function setPlat(plat) {
    this.platAdmin = {
      id: {}
    }
    this.$set(this.platAdmin.id, this.platType + 'Id', plat[this.platType + 'Id'])
    this.$set(this.platAdmin, this.platType, plat)
    this.$refs.adminModal.setAdmin({})
    this.$refs.adminModal.open()
  }
  function setAdmin(admin) {
    if (this.isLogin) {
      this.platAdmin = {
        id: {}
      }
      this.$set(this.platAdmin.id, this.platType + 'Id', loginPlat[this.platType + 'Id'])
      this.$set(this.platAdmin, this.platType, loginPlat)
    }
    this.platAdmin.id.adminId = admin.adminId
    this.platAdmin.admin = admin
    this.savePlatAdmin()
  }
  function setSearch(event) {
    this.search[event.target.name] = event.target.value
  }
  function dateTimeText(timestamp) {
    let date = new Date();
    date.setTime(timestamp);
    return date.format("yyyy-MM-dd hh:mm:ss");
  }
  function reset() {
    for (let i in this.platforms) {
      if (this.platforms[i].name.toLowerCase().indexOf(this.platType) != -1) {
        this.platform = i
        break
      }
    }
    this.search = {
      'sorts[0].field': 'id.adminId',
      'sorts[0].isDesc': true,
      nowPage: 1
    }
    this.platAdmins = []
    this.paging = {}
    this.platAdmin = {}
    loginPlat = null
    this.loadLoginPlat()
  }

  function breads() {
    return {
      title: '账号管理',
      items: [
        {
          href: '#/',
          name: '主页'
        },
        {
          href: '',
          name: '账号管理'
        }
      ]
    }
  }
  function platName() {
    if (this.platType == 'agent') {
      return '服务商'
    } else if (this.platType == 'merch') {
      return '商户'
    } else if (this.platType == 'shop') {
      return '门店'
    } else if (this.platType == 'user') {
      return '客户'
    }
  }
  function platNameText(platAdmin) {
    return platAdmin[this.platType + ''].name
  }
  function platNoText(platAdmin) {
    return platAdmin[this.platType + ''][this.platType + 'No']
  }
  function platIdText(platAdmin) {
    return platAdmin['id'][this.platType + 'Id']
  }
  function platformsValue() {
    for (let i in this.platforms) {
      if (this.platforms[i].name.toLowerCase().indexOf(this.platType) != -1) {
        return 1 << i
      }
    }
  }
  export default {
    props: {
      platType: String
    },
    components: {
      Breadcrumb,
      Footer,
      PageLink,
      PlatModal,
      AdminModal
    },
    data() {
      return {
        platforms,
        search,
        platAdmin,
        platAdmins,
        paging,
        isLogin: true,
      }
    },
    methods: {
      reset,
      loadLoginPlat,
      searchPlatAdmins,
      newPlatAdmin,
      editPlatAdmin,
      savePlatAdmin,
      delPlatAdmin,
      setPlat,
      setAdmin,
      setSearch,
      dateTimeText,
      platName,
      platNameText,
      platNoText,
      platIdText,
      platformsValue
    },
    computed: {
      breads
    },
    created() {
      this.reset()
    },
    watch: {
      platType() {
        this.reset()
      }
    }
  }
</script>